@charset "UTF-8"; /* ========================================================================== Feraasa theme layer - Phase 2 -------------------------------------------------------------------------- Loaded AFTER style.css and responsive.css. Everything here is the visual rebrand; style.css keeps the structure. Two consequences worth knowing: - Removing the single to this file reverts the whole look. - Anything hardcoded in style.css that resisted tokenising gets corrected here rather than by editing 1,400 lines of legacy CSS. Scope: site chrome (nav, footer, promo bar), typography, buttons, forms and focus states. The homepage hero keeps its existing structure and content by request - it inherits the palette but is not restructured. ========================================================================== */ /* Fonts are loaded from in layouts/master.blade.php, NOT with @import. An @import here serialises the download: the browser has to fetch and parse theme.css before it even learns the fonts exist, which widened the swap window and made headings visibly reflow from the fallback sans to Amiri - a serif with quite different metrics - after first paint. */ /* --- typography ---------------------------------------------------------- Amiri is display-only. It is a naskh serif: lovely at 24px+, tiring as body text on a screen, which is why Cairo carries all running copy. */ body { font-family: var(--fe-font-body); font-size: var(--fe-size-body); line-height: var(--fe-leading-body); color: var(--fe-ink); background-color: var(--fe-surface); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: var(--fe-font-display); font-weight: 400; /* a display serif does not need bolding */ color: var(--fe-ink); letter-spacing: 0; } h5, h6 { font-family: var(--fe-font-body); font-weight: 600; color: var(--fe-ink); } p, li, label, small, span, td, th, input, textarea, select, button { font-family: var(--fe-font-body); } /* The old stylesheet reached for weight 900 on section headings, which Amiri does not have (it stops at 700) - the browser would synthesise a smeared faux-bold. */ section.services h2, section.about h2, section.contact .contact-form h2, section.sign .content h2 { font-weight: 400; font-size: var(--fe-size-h2); color: var(--fe-ink); } /* Section titles were underscored with a 5px magenta bar. A hairline reads as considered; 5px of solid black reads as a warning label. */ section.services h2::after, section.about h2::after, .service-details .sidebar .request-service h3::after { height: 1px !important; width: 40px !important; background: var(--fe-ink) !important; margin-top: 14px; } /* --- links --------------------------------------------------------------- In a monochrome palette a colour-change hover is invisible, so links underline instead. */ a { color: var(--fe-ink); text-decoration: none; } a:hover { color: var(--fe-ink) !important; text-decoration: underline; text-underline-offset: 3px; } /* --- buttons ------------------------------------------------------------- One filled style (ink) and one outline style. Pill geometry throughout. */ .btn-primary, .btn-general, section .card-btn.fill, section.services .card .fill { background: var(--fe-brand) !important; border: 1px solid var(--fe-brand) !important; color: var(--fe-on-brand) !important; border-radius: var(--fe-radius-pill) !important; font-weight: 500; letter-spacing: 0; filter: none !important; transition: background-color var(--fe-dur-fast) var(--fe-ease); } .btn-primary:hover, .btn-general:hover, section .card-btn.fill:hover, section.services .card .fill:hover { background: var(--fe-brand-hover) !important; border-color: var(--fe-brand-hover) !important; color: var(--fe-on-brand) !important; text-decoration: none; filter: none !important; } .btn-default, .btn-radius { background: transparent; border: 1px solid var(--fe-brand) !important; color: var(--fe-brand) !important; border-radius: var(--fe-radius-pill) !important; font-weight: 500; } .btn-default:hover, .btn-radius:hover { background: var(--fe-brand) !important; color: var(--fe-on-brand) !important; text-decoration: none; } /* --- focus states -------------------------------------------------------- The legacy CSS suppressed focus rings in places, which fails keyboard users outright. Visible ring, keyboard-only. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--fe-ink); outline-offset: 2px; border-radius: var(--fe-radius-sm); } /* --- promo bar ---------------------------------------------------------- Styles were inline on the element (including a #fe0058 countdown). Moved here so the bar follows the palette, and given a min-height so it cannot change size once the countdown script starts - it sits in normal flow above the hero, so any growth pushes the entire page down. */ .promo-banner, .promo-bar { background: var(--fe-ink) !important; color: var(--fe-on-dark) !important; font-family: var(--fe-font-body); font-size: 13px; font-weight: 400; letter-spacing: 0; text-align: center; padding: 9px 14px; min-height: 40px; /* reserved: one line, never reflows */ display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; position: relative; z-index: 1030; } .promo-banner a, .promo-bar a { color: var(--fe-on-dark) !important; } #promo-countdown { color: var(--fe-on-dark); /* Tabular figures keep every digit the same width, so the seconds ticking over cannot nudge the line's length once a second. */ font-variant-numeric: tabular-nums; white-space: nowrap; } /* On narrow screens the headline plus countdown will not fit on one line; allow two and reserve the height for them rather than reflowing. */ @media (max-width: 575.98px) { .promo-banner, .promo-bar { flex-wrap: wrap; min-height: 58px; font-size: 12px; line-height: 1.5; } } /* --- navbar -------------------------------------------------------------- */ .navbar { background-color: var(--fe-surface); box-shadow: none; border-bottom: 1px solid var(--fe-border-soft); } .navbar-expand-xl .navbar-nav .nav-link { color: var(--fe-ink-muted); font-family: var(--fe-font-body); font-weight: 400; } .navbar-expand-xl .navbar-nav .nav-link:hover, .navbar-expand-xl .navbar-nav .nav-link.active { color: var(--fe-ink); text-decoration: none; } .navbar a.login { background: var(--fe-brand) !important; color: var(--fe-on-brand) !important; border-radius: var(--fe-radius-pill); font-weight: 500; } .navbar a.login:hover { background: var(--fe-brand-hover) !important; text-decoration: none; } /* The logo grew 20% on hover, which looked like a bug rather than a flourish. */ .logo:hover { transform: none; -webkit-transform: none; } /* --- cards -------------------------------------------------------------- */ section.services .card, .reviews .card { background: var(--fe-surface); border: 1px solid var(--fe-border-soft); border-radius: var(--fe-radius-card); box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; transition: border-color var(--fe-dur-fast) var(--fe-ease); } section.services .card:hover, .reviews .card:hover { border-color: var(--fe-ink); box-shadow: none !important; } /* --- forms -------------------------------------------------------------- */ section.contact .contact-form input, section.contact .contact-form textarea, section.sign .sign-up input { background: var(--fe-surface); border: 1px solid var(--fe-border) !important; border-radius: var(--fe-radius-sm) !important; color: var(--fe-ink); font-family: var(--fe-font-body); } section.contact .contact-form input::placeholder, section.contact .contact-form textarea::placeholder, section.sign .sign-up input::placeholder { color: var(--fe-ink-faint); } section.contact .contact-form span.title { background: var(--fe-surface-tint); color: var(--fe-ink-muted); border-radius: var(--fe-radius-pill); } /* Validation must not rely on the brand colour, which is now black. */ #emailErrorMsg, label .error, .text-danger, span.text-danger { color: var(--fe-danger) !important; } /* --- testimonials ------------------------------------------------------- */ section.testimonials { background: var(--fe-surface); } section.testimonials i { color: var(--fe-ink-faint); font-size: 40px; } section.testimonials .count span { color: var(--fe-ink); font-weight: 400; } section.testimonials .owl-nav button { border: 1px solid var(--fe-border) !important; border-radius: 50% !important; } section.testimonials .owl-nav button span { color: var(--fe-ink); } .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover { background-color: var(--fe-ink); border-color: var(--fe-ink) !important; } .owl-carousel .owl-nav button.owl-next:hover span, .owl-carousel .owl-nav button.owl-prev:hover span { color: var(--fe-on-brand); } /* --- footer ------------------------------------------------------------- The footer is inverted, so every accent that now resolves to ink would disappear against it. These flip to white. */ footer { background-color: var(--fe-footer-bg); } footer .footer-top { background-color: var(--fe-footer-bg); color: var(--fe-on-dark); } footer .footer-bottom { background-color: var(--fe-footer-deep); } footer .footer-top h3 { font-family: var(--fe-font-display); color: var(--fe-on-dark); } footer .footer-top p, footer .footer-bottom p { font-family: var(--fe-font-body); } footer .footer-top ul li a { color: var(--fe-footer-link); } footer .footer-top ul li:hover a { color: var(--fe-on-dark); text-decoration: none; } footer .footer-top ul li:before { color: var(--fe-on-dark); } footer .footer-top form input { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--fe-radius-sm); color: var(--fe-on-dark); } footer .footer-top form input::placeholder { color: rgba(255, 255, 255, .5); } footer .footer-top form button, footer .footer-top form button i, footer .footer-top form button:hover { color: var(--fe-on-dark) !important; } footer .footer-top .go-to-top { background: transparent; border: 1px solid var(--fe-on-dark); border-radius: 50%; } footer .footer-top .go-to-top a, footer .footer-top .go-to-top:hover a { color: var(--fe-on-dark); } footer .footer-top .go-to-top:hover { background: var(--fe-on-dark); border-color: var(--fe-on-dark); } footer .footer-top .go-to-top:hover a { color: var(--fe-ink); } /* --- pagination + rating ------------------------------------------------ */ ul.pagination .page-link { color: var(--fe-ink); } ul.pagination .active > .page-link, .page-link.active { background-color: var(--fe-ink); border-color: var(--fe-ink); color: var(--fe-on-brand); } .rating-input > label:after, .rating-score > .rating-score-item:after { color: var(--fe-rating); } /* --- page header -------------------------------------------------------- The banner image is set inline in the templates, so it survived the rebrand and left dark ink headings sitting on a dark decorative photograph - the title was barely readable. The image is dropped rather than overlaid: it is pure decoration, it clashes with a monochrome palette, and not downloading it makes every inner page lighter. */ .page-header { background-image: none !important; background-color: var(--fe-surface-tint); height: auto !important; padding: 56px 20px !important; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--fe-border-soft); } .page-header h1, .page-header h2 { color: var(--fe-ink) !important; font-family: var(--fe-font-display); font-weight: 400; font-size: 32px; margin: 0; text-align: center; } /* --- reviews section ---------------------------------------------------- */ section.reviews { background-color: var(--fe-surface-tint); } .reviews .navbar-nav .nav-link { color: var(--fe-ink-muted) !important; font-weight: 400; } .reviews .navbar-nav .nav-link:hover, .reviews .navbar-nav .nav-link:focus { color: var(--fe-ink) !important; } .reviews ul.dropdown-menu a.active { background-color: var(--fe-surface-tint); color: var(--fe-ink) !important; } /* --- service detail sidebar -------------------------------------------- */ .service-details .sidebar .request-service { background: var(--fe-surface); border: 1px solid var(--fe-border-soft); border-radius: var(--fe-radius-card); } .service-details .sidebar .request-service h3 { font-family: var(--fe-font-display); font-weight: 400; } .service-details .sidebar .request-service span { background: var(--fe-brand); color: var(--fe-on-brand); border-radius: var(--fe-radius-pill); font-weight: 500; } /* --- misc legacy corrections ------------------------------------------- */ .btn-service-buy { background: var(--fe-surface); border: 1px solid var(--fe-border-soft); border-radius: var(--fe-radius-sm); box-shadow: none; } .btn-service-buy a { background: var(--fe-brand); color: var(--fe-on-brand) !important; border-radius: var(--fe-radius-pill); padding: 6px 16px; } .service-order:hover { border-color: var(--fe-ink) !important; } .bg-primary-2 { background-color: var(--fe-surface-tint); } .process-circle { background-color: var(--fe-surface-tint); } .no-bottom-margin { font-family: var(--fe-font-body); } /* --- services listing page ---------------------------------------------- The dark background, 400px image height and translucent white border were inline in services.blade.php, which made them unthemeable. That markup is now cleaned up, so these are ordinary rules rather than !important overrides fighting inline styles. */ section.services .card { /* !important because the deployed template still sets a dark background-color inline; an important author rule outranks a normal inline one. Harmless once the cleaned template ships. */ background-color: var(--fe-surface) !important; border: 1px solid var(--fe-border-soft); border-radius: var(--fe-radius-card); /* No padding: the image runs full-bleed to the card edges and the card's own radius clips it. Padding here is what made the image read as a framed picture sitting inside a box. Inner spacing moves onto the text elements. */ padding: 0 !important; margin: 0 0 26px; overflow: hidden; align-items: stretch; text-align: start; height: auto; } section.services .card:hover { border-color: var(--fe-ink); } /* Only the image URL stays inline now; everything else lives here. */ section.services .card .service-card-image, section.services .card .card-image { /* A ratio rather than a fixed height, so cards stay proportional at every breakpoint instead of letterboxing on narrow screens. */ aspect-ratio: 3 / 2; height: auto; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--fe-surface-tint); /* graceful when the URL is empty */ border: 0; border-radius: 0; transition: transform .5s var(--fe-ease); } /* The image lifts slightly on hover; the card clips the overflow. Transform only, so it never triggers layout. */ section.services .card:hover .service-card-image, section.services .card:hover .card-image { transform: scale(1.04); } /* Text gets the inset the card no longer has. */ section.services .card h1, section.services .card h2, section.services .card p, section.services .card .button-wrapper { padding-inline: 22px; } section.services .card .button-wrapper { padding-bottom: 22px; } section.services .card h1, section.services .card h2 { color: var(--fe-ink) !important; font-family: var(--fe-font-display) !important; font-weight: 400 !important; font-size: 23px !important; text-transform: none !important; /* uppercase does nothing to Arabic and shouts in English */ margin: 18px 0 8px !important; text-align: start !important; } section.services .card p { color: var(--fe-ink-muted) !important; font-family: var(--fe-font-body) !important; font-size: 14px !important; line-height: 1.85 !important; text-transform: none !important; letter-spacing: 0 !important; text-align: start !important; margin-bottom: 18px !important; } /* The free-quiz card ships its own