/*========================================================================== REFO DIGITAL PLATFORM ------------------------------------------------------------------------ File : refo-brand.css Layer : Presentation Module : Brand System Purpose ------------------------------------------------------------------------ Defines the official visual identity of the REFO Digital Platform. Responsibilities ------------------------------------------------------------------------ • Brand Colours • Typography • Spacing • Border Radius • Shadows • Animation • Transitions • Z-Index Standards Architecture ------------------------------------------------------------------------ Every stylesheet within the platform MUST consume variables defined in this file. Hardcoded colours are prohibited unless technically unavoidable. Version ------------------------------------------------------------------------ REFO Brand System 1.0 ===========================================================================*/ /*========================================================================== REFO BRAND DESIGN SYSTEM ------------------------------------------------------------------------ Official Colour Palette ===========================================================================*/ :root{ /*-------------------------------------------------------------- Official Brand Colours Derived from the REGEN Earth Foundation Logo --------------------------------------------------------------*/ --refo-primary:#0B5A2B; --refo-primary-dark:#08421F; --refo-secondary:#6BAF1E; --refo-secondary-dark:#4E8F14; --refo-accent:#8CC63F; --refo-overlay:rgba(11,90,43,.70); /*-------------------------------------------------------------- Neutral Colours --------------------------------------------------------------*/ --refo-white:#FFFFFF; --refo-light:#F7F9F8; --refo-light-gray:#F2F4F5; --refo-border:#E4E8E5; --refo-text:#2F3A3D; --refo-text-light:#6C757D; /*-------------------------------------------------------------- Status Colours --------------------------------------------------------------*/ --refo-success:#2E7D32; --refo-warning:#F5A623; --refo-danger:#C62828; --refo-info:#215DAA; /*-------------------------------------------------------------- Typography --------------------------------------------------------------*/ --refo-font-family: "Poppins", sans-serif; --refo-font-size-xs:.75rem; --refo-font-size-sm:.875rem; --refo-font-size-md:1rem; --refo-font-size-lg:1.125rem; --refo-font-size-xl:1.5rem; --refo-font-size-xxl:2.5rem; --refo-line-height:1.7; /*-------------------------------------------------------------- Font Weight --------------------------------------------------------------*/ --refo-fw-normal:400; --refo-fw-medium:500; --refo-fw-semibold:600; --refo-fw-bold:700; /*-------------------------------------------------------------- Border Radius --------------------------------------------------------------*/ --refo-radius-sm:8px; --refo-radius-md:15px; --refo-radius-lg:30px; --refo-radius-xl:50px; /*-------------------------------------------------------------- Shadows --------------------------------------------------------------*/ --refo-shadow-sm: 0 3px 10px rgba(0,0,0,.05); --refo-shadow-md: 0 10px 30px rgba(0,0,0,.08); --refo-shadow-lg: 0 18px 45px rgba(0,0,0,.12); /*-------------------------------------------------------------- Spacing --------------------------------------------------------------*/ --refo-space-xs:.5rem; --refo-space-sm:1rem; --refo-space-md:2rem; --refo-space-lg:3rem; --refo-space-xl:5rem; /*-------------------------------------------------------------- Transition --------------------------------------------------------------*/ --refo-transition: all .30s ease; /*-------------------------------------------------------------- Z-Index --------------------------------------------------------------*/ --refo-z-header:1000; --refo-z-dropdown:1100; --refo-z-modal:1200; --refo-z-loader:9999; } /*========================================================================== HEADER BRANDING ------------------------------------------------------------------------ Layer : REFO Brand System Module : Primary Navigation Purpose : Applies the official REFO visual identity to the public website header while preserving the vendor architecture. Engineering Rules ------------------------------------------------------------------------ • Never modify header.css • Never modify vendor styles • Override appearance only • Preserve responsive behaviour • Preserve dropdown functionality • Preserve sticky navigation ===========================================================================*/ /*========================================================================== HEADER CONTAINER ===========================================================================*/ .header-style-one{ background: transparent; } /*========================================================================== HEADER CAPSULE ===========================================================================*/ .header-style-one .header-lower .outer-box{ background: var(--refo-primary); border-radius: 70px; box-shadow: var(--refo-shadow-lg); border: 1px solid rgba(255,255,255,.08); transition: var(--refo-transition); } /*========================================================================== LOGO ===========================================================================*/ .header-style-one .logo-box{ position: relative; z-index: 10; } /*========================================================================== PRIMARY NAVIGATION ===========================================================================*/ .main-menu .navigation > li > a{ color: var(--refo-white); font-weight: var(--refo-fw-semibold); letter-spacing: .3px; transition: var(--refo-transition); } /*========================================================================== MENU HOVER ===========================================================================*/ .main-menu .navigation > li:hover > a{ color: var(--refo-white); } /*========================================================================== ACTIVE MENU ===========================================================================*/ .main-menu .navigation > li.current > a{ color: var(--refo-white); position: relative; } /*========================================================================== ACTIVE MENU INDICATOR ===========================================================================*/ .main-menu .navigation > li.current > a::after{ content: ""; position: absolute; left: 50%; bottom: 18px; width: 28px; height: 3px; transform: translateX(-50%); background: var(--refo-accent); border-radius: 20px; } /*========================================================================== DROPDOWN ICON ===========================================================================*/ .main-menu .navigation > li.dropdown > a:before{ color: rgba(255,255,255,.85); } /*========================================================================== SEARCH BUTTON ===========================================================================*/ .main-header .menu-right-content .search-toggler{ background: rgba(255,255,255,.12); color: var(--refo-white); border: 1px solid rgba(255,255,255,.20); transition: var(--refo-transition); } .main-header .menu-right-content .search-toggler:hover{ background: var(--refo-primary); border-color: var(--refo-primary); color: var(--refo-white); } /*========================================================================== HEADER BRANDING (PART 2) ------------------------------------------------------------------------ Sticky Header Dropdown Menus Call-To-Action Mobile Navigation Accessibility Version : 1.0 ===========================================================================*/ /*========================================================================== STICKY HEADER ===========================================================================*/ .sticky-header{ background: var(--refo-secondary); box-shadow: var(--refo-shadow-md); } .sticky-header .main-menu .navigation > li > a{ color: var(--refo-white); font-weight: var(--refo-fw-semibold); } .sticky-header .main-menu .navigation > li.current > a{ color: var(--refo-white); } .sticky-header .main-menu .navigation > li.current > a::after{ content: ""; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 28px; height: 3px; background: var(--refo-accent); border-radius: 20px; } /*========================================================================== DROPDOWN MENU ===========================================================================*/ .main-menu .navigation > li > ul{ background: var(--refo-white); border-top: 4px solid var(--refo-primary); border-radius: var(--refo-radius-md); box-shadow: var(--refo-shadow-lg); } .main-menu .navigation > li > ul > li > a{ color: var(--refo-text); transition: var(--refo-transition); } .main-menu .navigation > li > ul > li:hover > a{ color: var(--refo-primary); padding-left: 28px; } .main-menu .navigation > li > ul > li{ border-bottom: 1px solid var(--refo-border); } /*========================================================================== CTA BUTTON ===========================================================================*/ .btn-one{ background: var(--refo-primary); border-color: var(--refo-primary); color: var(--refo-white); transition: var(--refo-transition); } .btn-one:hover{ background: var(--refo-primary-dark); border-color: var(--refo-primary-dark); color: var(--refo-white); } /*========================================================================== MOBILE MENU ===========================================================================*/ .mobile-menu{ background: var(--refo-secondary); } .mobile-menu .navigation li a{ color: var(--refo-white); } .mobile-menu .navigation li.current > a{ color: var(--refo-primary); } .mobile-menu .navigation li a:hover{ color: var(--refo-primary); } /*========================================================================== KEYBOARD ACCESSIBILITY ===========================================================================*/ .main-menu .navigation > li > a:focus{ outline: 2px solid var(--refo-primary); outline-offset: 4px; } /*========================================================================== HEADER TRANSITIONS ===========================================================================*/ .main-header, .header-style-one, .sticky-header, .main-menu .navigation > li > a, .btn-one{ transition: var(--refo-transition); } /*========================================================================== END HEADER BRANDING ===========================================================================*/ /*========================================================================== HERO BANNER ------------------------------------------------------------------------ Official REFO Homepage Hero Branding ===========================================================================*/ /*========================================================================== HERO BRANDING ------------------------------------------------------------------------ Layer : REFO Brand System Module : Homepage Hero Banner ===========================================================================*/ /*========================================================================== HERO OVERLAY ------------------------------------------------------------------------ Creates the official REFO environmental visual identity by applying a forest green overlay derived from the REFO logo. ===========================================================================*/ .banner-style-four .slide-item::before{ content:""; position:absolute; inset:0; background:linear-gradient( 90deg, rgba(11,90,43,.82) 0%, rgba(11,90,43,.68) 45%, rgba(11,90,43,.50) 100% ); z-index:1; } .banner-style-four .content-box{ position:relative; z-index:2; max-width:900px; } /*========================================================================== HERO SUBTITLE ===========================================================================*/ .banner-style-four .content-box .sub-title{ color:var(--refo-accent); font-weight:var(--refo-fw-semibold); letter-spacing:1px; text-transform:uppercase; } /*========================================================================== HERO TITLE ===========================================================================*/ .banner-style-four .content-box h2{ color:var(--refo-white); font-weight:700; line-height:1.15; text-shadow:0 3px 12px rgba(0,0,0,.25); } /*========================================================================== HERO DESCRIPTION ===========================================================================*/ .banner-style-four .content-box p{ color:rgba(255,255,255,.95); max-width:700px; font-size:18px; line-height:1.8; } /*========================================================================== HERO BRANDING - FINAL POLISH ===========================================================================*/ /* |-------------------------------------------------------------------------- | Hero Content Spacing |-------------------------------------------------------------------------- */ .banner-style-four .content-box{ padding-top:40px; } /* |-------------------------------------------------------------------------- | Hero Main Heading |-------------------------------------------------------------------------- */ .banner-style-four .content-box h2{ font-size:72px; line-height:1.15; letter-spacing:-1px; } /* |-------------------------------------------------------------------------- | Hero Subtitle |-------------------------------------------------------------------------- */ .banner-style-four .content-box .sub-title{ color:var(--refo-accent); font-size:22px; font-weight:700; text-transform:uppercase; } /* |-------------------------------------------------------------------------- | Hero Primary Button |-------------------------------------------------------------------------- */ .banner-style-four .btn-one{ background:var(--refo-primary); border-color:var(--refo-primary); color:var(--refo-white); } .banner-style-four .btn-one:hover{ background:var(--refo-primary-dark); border-color:var(--refo-primary-dark); } /* |-------------------------------------------------------------------------- | Large Desktop Refinement |-------------------------------------------------------------------------- */ @media (min-width:1400px){ .banner-style-four .content-box{ max-width:900px; } .banner-style-four .content-box h2{ font-size:72px; } } /* |-------------------------------------------------------------------------- | Tablet |-------------------------------------------------------------------------- */ @media (max-width:991px){ .banner-style-four .content-box h2{ font-size:54px; } } /* |-------------------------------------------------------------------------- | Mobile |-------------------------------------------------------------------------- */ @media (max-width:767px){ .banner-style-four .content-box{ padding-top:20px; } .banner-style-four .content-box h2{ font-size:42px; line-height:1.25; } .banner-style-four .content-box .sub-title{ font-size:16px; } } /*========================================================================== FOOTER BRANDING ------------------------------------------------------------------------ Layer : REFO Brand System Module : Global Footer ===========================================================================*/ /*========================================================================== MAIN FOOTER ===========================================================================*/ .main-footer{ background:var(--refo-primary); color:rgba(255,255,255,.88); } /*========================================================================== FOOTER TITLES ===========================================================================*/ .main-footer h2, .main-footer h3, .main-footer h4, .main-footer h5, .main-footer .widget-title{ color:var(--refo-white); font-weight:700; } /*========================================================================== FOOTER PARAGRAPHS ===========================================================================*/ .main-footer p{ color:rgba(255,255,255,.80); line-height:1.9; } /*========================================================================== FOOTER LINKS ===========================================================================*/ .main-footer a{ color:rgba(255,255,255,.85); transition:var(--refo-transition); } .main-footer a:hover{ color:var(--refo-accent); } /*========================================================================== FOOTER LISTS ===========================================================================*/ .main-footer ul li{ color:rgba(255,255,255,.82); } /*========================================================================== CONTACT ICONS ===========================================================================*/ .main-footer .icon-box{ background:var(--refo-secondary); color:var(--refo-white); border-radius:50%; } /*========================================================================== SUBSCRIBE BUTTON ===========================================================================*/ .main-footer .btn-one{ background:var(--refo-secondary); border-color:var(--refo-secondary); color:var(--refo-white); } .main-footer .btn-one:hover{ background:var(--refo-primary-dark); border-color:var(--refo-primary-dark); } /*========================================================================== COPYRIGHT ===========================================================================*/ .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); } .footer-bottom p{ color:rgba(255,255,255,.70); } /*========================================================================== SOCIAL ICONS ===========================================================================*/ .main-footer .social-links li a{ background:rgba(255,255,255,.10); color:var(--refo-white); } .main-footer .social-links li a:hover{ background:var(--refo-secondary); } /*========================================================================== REFO DIGITAL PLATFORM ------------------------------------------------------------------------ HERO BANNER BRANDING Layer : REFO Brand System Module : Homepage Hero Banner Version : 1.0 Purpose ------------------------------------------------------------------------ Applies the official REFO branding to the homepage hero while preserving the vendor banner architecture. ===========================================================================*/ /*========================================================================== HERO OVERLAY ===========================================================================*/ .banner-style-four .slide-item::before{ content:""; position:absolute; inset:0; background:linear-gradient( 90deg, rgba(33,93,170,.78) 0%, rgba(33,93,170,.62) 50%, rgba(33,93,170,.52) 100% ); z-index:1; } /*========================================================================== HERO CONTENT ===========================================================================*/ .banner-style-four .content-box{ position:relative; z-index:2; max-width:900px; padding-top:40px; } /*========================================================================== HERO SUBTITLE ===========================================================================*/ .banner-style-four .sub-title, .banner-style-four .content-box .sub-title, .banner-style-four .content-box .upper-text, .banner-style-four .content-box .upper-text span{ color:var(--refo-danger) !important; font-weight:700; letter-spacing:2px; text-transform:uppercase; } /*========================================================================== HERO TITLE ===========================================================================*/ .banner-style-four .content-box h2{ color:var(--refo-white); font-size:72px; font-weight:700; line-height:1.15; letter-spacing:-1px; text-shadow:0 4px 18px rgba(0,0,0,.25); } /*========================================================================== HERO DESCRIPTION ===========================================================================*/ .banner-style-four .content-box p{ color:rgba(255,255,255,.95); font-size:18px; line-height:1.8; max-width:720px; } /*========================================================================== HERO BUTTON ===========================================================================*/ .banner-style-four .btn-one{ background:var(--refo-primary); border-color:var(--refo-primary); color:var(--refo-white); } .banner-style-four .btn-one:hover{ background:var(--refo-primary-dark); border-color:var(--refo-primary-dark); } /*========================================================================== HERO CONTROLS ===========================================================================*/ .banner-style-four .owl-nav .owl-prev, .banner-style-four .owl-nav .owl-next{ background:rgba(255,255,255,.15); color:var(--refo-white); border:1px solid rgba(255,255,255,.20); } .banner-style-four .owl-nav .owl-prev:hover, .banner-style-four .owl-nav .owl-next:hover{ background:var(--refo-primary); border-color:var(--refo-primary); } /*========================================================================== HERO PAGINATION ===========================================================================*/ .banner-style-four .owl-dots .owl-dot span{ background:rgba(255,255,255,.40); } .banner-style-four .owl-dots .owl-dot.active span{ background:var(--refo-primary); } /*========================================================================== RESPONSIVE ===========================================================================*/ @media (max-width:991px){ .banner-style-four .content-box{ max-width:100%; padding-top:25px; } .banner-style-four .content-box h2{ font-size:54px; } } @media (max-width:767px){ .banner-style-four .content-box h2{ font-size:40px; line-height:1.25; } .banner-style-four .content-box p{ font-size:16px; } } /*========================================================================== REFO DIGITAL PLATFORM ------------------------------------------------------------------------ INTERNAL PAGE BANNERS Layer : REFO Brand System Module : Page Title Banner Applies to: • About Us • What We Do • Events • Contact • Future Internal Pages ===========================================================================*/ /*========================================================================== PAGE BANNER OVERLAY ===========================================================================*/ .page-title{ position:relative; overflow:hidden; } .page-title::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient( 90deg, rgba(33,93,170,.78) 0%, rgba(33,93,170,.65) 55%, rgba(33,93,170,.55) 100% ); z-index:1; } /*========================================================================== PAGE TITLE CONTENT ===========================================================================*/ .page-title .content-box{ position:relative; z-index:2; } /*========================================================================== PAGE TITLE ===========================================================================*/ .page-title h1{ color:var(--refo-white); font-weight:700; font-size:56px; line-height:1.2; text-shadow:0 3px 12px rgba(0,0,0,.20); } /*========================================================================== BREADCRUMB ===========================================================================*/ .page-title .bread-crumb li{ color:rgba(255,255,255,.85); } .page-title .bread-crumb li a{ color:rgba(255,255,255,.95); transition:var(--refo-transition); } .page-title .bread-crumb li a:hover{ color:var(--refo-primary); } /*========================================================================== ACTIVE BREADCRUMB ===========================================================================*/ .page-title .bread-crumb li:last-child{ color:var(--refo-primary); font-weight:600; } /*========================================================================== RESPONSIVE ===========================================================================*/ @media (max-width:991px){ .page-title h1{ font-size:42px; } } @media (max-width:767px){ .page-title{ padding:120px 0 80px; } .page-title h1{ font-size:34px; line-height:1.3; } } /*============================================================================== REFO DIGITAL PLATFORM -------------------------------------------------------------------------- STAFF PORTAL / WEBMAIL -------------------------------------------------------------------------- File Layer : Presentation Module : Staff Portal Component : Webmail Access Purpose -------------------------------------------------------------------------- Provides the official REFO visual presentation for the Staff Portal and organizational webmail access interface. Architecture -------------------------------------------------------------------------- This module has been adapted from the established Staff Portal presentation architecture while consuming the official REFO Brand Design System variables. Responsibilities -------------------------------------------------------------------------- • Staff Portal page presentation • Webmail access card • Portal hero/banner • Security information • Support information • Future staff-service cards • Responsive presentation Engineering Rules -------------------------------------------------------------------------- • Uses REFO brand variables. • Does not modify vendor CSS. • Does not modify global page architecture. • Staff Portal styles remain isolated through staff-* selectors. • Responsive behaviour is preserved. Version -------------------------------------------------------------------------- REFO Staff Portal 1.0.0 ==============================================================================*/ /*============================================================================== STAFF PORTAL PAGE ==============================================================================*/ .staff-portal-page{ background:var(--refo-light); padding:100px 0; } /*============================================================================== STAFF PORTAL HERO ==============================================================================*/ .staff-hero-section{ position:relative; overflow:hidden; border-radius:20px; margin-bottom:60px; min-height:520px; background:url("../images/team/staff-portal-banner.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:scroll; box-shadow:var(--refo-shadow-lg); } /*============================================================================== HERO CONTENT VISIBILITY -------------------------------------------------------------------------- The Staff Portal currently uses the banner artwork itself as the primary visual introduction. Text content remains hidden from the banner. ==============================================================================*/ .staff-hero-content{ display:none; } /*============================================================================== HERO DECORATIVE OVERLAY ==============================================================================*/ .staff-hero-section::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top right, rgba(255,255,255,.08), transparent 45% ); pointer-events:none; } /*============================================================================== PORTAL BADGE ==============================================================================*/ .staff-portal-badge{ display:inline-block; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); color:var(--refo-white); padding:10px 30px; border-radius:50px; font-size:13px; font-weight:var(--refo-fw-bold); letter-spacing:2px; text-transform:uppercase; margin-bottom:30px; } /*============================================================================== PORTAL TITLE ==============================================================================*/ .staff-portal-title{ color:var(--refo-white); font-size:58px; font-weight:800; line-height:1.2; margin-bottom:25px; text-shadow:0 3px 12px rgba(0,0,0,.30); } /*============================================================================== PORTAL DESCRIPTION ==============================================================================*/ .staff-portal-description{ max-width:860px; margin:0 auto 35px; color:rgba(255,255,255,.96); font-size:21px; line-height:36px; } /*============================================================================== PORTAL INTRODUCTION ==============================================================================*/ .staff-portal-introduction{ max-width:900px; margin:auto; } .staff-portal-introduction p{ color:rgba(255,255,255,.90); line-height:32px; margin-bottom:15px; } /*============================================================================== SHARED PORTAL CARDS ==============================================================================*/ .staff-email-card, .staff-security-card, .staff-support-box{ background:var(--refo-white); border-radius:18px; padding:50px; box-shadow:var(--refo-shadow-md); margin-bottom:50px; transition:var(--refo-transition); } .staff-email-card:hover, .staff-security-card:hover, .staff-support-box:hover{ transform:translateY(-6px); box-shadow:var(--refo-shadow-lg); } /*============================================================================== STAFF PORTAL ICONS ==============================================================================*/ .staff-email-icon, .staff-support-icon, .staff-security-icon, .staff-future-icon{ width:75px; height:75px; border-radius:50%; background:var(--refo-primary); color:var(--refo-white); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 25px; } /*============================================================================== STAFF PORTAL TITLES ==============================================================================*/ .staff-email-title, .staff-security-title, .staff-support-title{ color:var(--refo-text); font-weight:var(--refo-fw-bold); margin-bottom:20px; } /*============================================================================== STAFF PORTAL DESCRIPTIONS ==============================================================================*/ .staff-email-description, .staff-security-description, .staff-support-description{ color:var(--refo-text-light); line-height:30px; } /*============================================================================== WEBMAIL ACTION ==============================================================================*/ .staff-email-action{ margin-top:35px; text-align:center; } /*============================================================================== WEBMAIL LOGIN BUTTON ==============================================================================*/ .staff-email-action .theme-btn{ background:var(--refo-primary); border:2px solid var(--refo-primary); color:var(--refo-white); padding:15px 40px; border-radius:50px; transition:var(--refo-transition); } .staff-email-action .theme-btn:hover{ background:var(--refo-primary-dark); border-color:var(--refo-primary-dark); color:var(--refo-white); } /*============================================================================== FUTURE STAFF SERVICES ==============================================================================*/ .staff-future-card{ background:var(--refo-white); padding:40px 30px; border-radius:18px; text-align:center; margin-bottom:30px; box-shadow:var(--refo-shadow-md); transition:var(--refo-transition); } .staff-future-card:hover{ transform:translateY(-8px); box-shadow:var(--refo-shadow-lg); } .staff-future-card h4{ margin:20px 0; color:var(--refo-text); } .staff-future-card p{ color:var(--refo-text-light); line-height:28px; } /*============================================================================== COMING SOON BADGE ==============================================================================*/ .coming-soon{ display:inline-block; margin-top:20px; padding:8px 18px; background:var(--refo-light-gray); color:var(--refo-primary); border-radius:30px; font-size:13px; font-weight:var(--refo-fw-bold); text-transform:uppercase; } /*============================================================================== SECURITY ITEMS ==============================================================================*/ .staff-security-item{ display:flex; align-items:flex-start; gap:25px; margin-bottom:35px; } .staff-security-text h4{ color:var(--refo-text); margin-bottom:10px; } .staff-security-text p{ color:var(--refo-text-light); margin-bottom:0; } /*============================================================================== SUPPORT CARDS ==============================================================================*/ .staff-support-card{ background:var(--refo-light); border-radius:15px; padding:35px; text-align:center; transition:var(--refo-transition); height:100%; } .staff-support-card:hover{ background:var(--refo-white); box-shadow:var(--refo-shadow-md); } /*============================================================================== SUPPORT LINKS ==============================================================================*/ .staff-support-card a{ color:var(--refo-primary); font-weight:var(--refo-fw-bold); text-decoration:none; } .staff-support-card a:hover{ color:var(--refo-primary-dark); text-decoration:underline; } /*============================================================================== SUPPORT FOOTER ==============================================================================*/ .staff-support-footer{ text-align:center; margin-top:50px; } .staff-support-footer h4{ color:var(--refo-primary); margin-top:15px; } /*============================================================================== TABLET RESPONSIVE ==============================================================================*/ @media(max-width:991px){ .staff-hero-section{ padding:60px 30px; } .staff-portal-title{ font-size:40px; } .staff-email-card, .staff-security-card, .staff-support-box{ padding:35px; } } /*============================================================================== MOBILE RESPONSIVE ==============================================================================*/ @media(max-width:767px){ .staff-portal-page{ padding:70px 0; } .staff-hero-section{ padding:45px 20px; min-height:380px; } .staff-portal-title{ font-size:32px; } .staff-security-item{ flex-direction:column; text-align:center; } } /*============================================================================== END REFO STAFF PORTAL / WEBMAIL ==============================================================================*/