/* PODADO. El original completo está en tools/css-plantilla/main.css. Se regenera con: node tools/podar-css.cjs (con el servidor de desarrollo levantado) Si usas una clase de la plantilla que hoy no se usa, su regla NO está aquí. */ @charset "UTF-8"; /*----------------------------------------------------------------------------------- Template Name: Orisa - Creative Portfolio Agency HTML Template Author: AliThemes Support: https://alithemes.ticksy.com/ Description: Orisa - Creative Portfolio Agency HTML Template Version: 1.0.0 **********************************************/ /*----------------------------------------*/ /* 1.1 Default /*----------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap"'); /* beautify ignore:start */ .back-to-top-wrapper, a, button, p, input, select, textarea, li { transition: all 0.3s ease-out; } /* transform */ /* beautify ignore:start */ .rotate-90 { rotate: 90deg; } .fz-150 { font-size: 120px; } .fz-200 { font-size: 150px; } .fz-ds-1 { font-size: 80px !important; } @media screen and (min-width: 1441px) { .fz-150 { font-size: 150px; } .fz-200 { font-size: 200px; } .fz-ds-1 { font-size: 124px !important; } } .opacity-10 { opacity: 0.1; } .odometer { letter-spacing: 12px; } .fill-primary path { fill: var(--at-theme-primary); } .px-blur-bottom { backdrop-filter: blur(10px); bottom: 0; flex: none; height: 80px; left: 0; -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add; mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add; overflow: visible; position: fixed; right: 0; pointer-events: none; z-index: 999; } .pagination { display: flex; align-items: center; gap: 8px; list-style: none; margin-top: 70px; padding: 0; } .pagination .pagination_item { background: var(--at-neutral-0); border-radius: 50%; border: 1px solid var(--at-neutral-100); width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; font-size: var(--at-fz-font-lg); font-weight: 600; text-transform: uppercase; color: var(--at-neutral-900); transition: all 0.3s ease-in-out; } .pagination .pagination_item svg path { fill: var(--at-neutral-900) !important; } .pagination .pagination_item:hover { color: var(--at-neutral-0) !important; background: var(--at-neutral-900) !important; border-color: var(--at-neutral-900) !important; } .pagination .pagination_item:hover svg path { fill: var(--at-neutral-0) !important; } .pagination .pagination_item:focus { box-shadow: none; background-color: var(--at-neutral-900) !important; border-color: var(--at-neutral-900); color: var(--at-neutral-0) !important; } .pagination .pagination_item:focus svg path { fill: var(--at-neutral-0) !important; } .pagination .pagination_item.current { color: var(--at-neutral-0) !important; background: var(--at-neutral-900) !important; border-color: var(--at-neutral-900) !important; } .pagination .pagination_item.current svg path { fill: var(--at-neutral-0) !important; } /* Text Truncation */ .border-100 { border: 1px solid var(--at-neutral-100) !important; } .border-bottom-100 { border-bottom: 1px solid var(--at-neutral-100) !important; } .border-dark\/01 { border-right: 1px solid var(--at-neutral-900); } @media (min-width: 768px) { .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .w-lg-50 { width: 50%; } } @media (max-width: 574.98px) { .w-50 { width: 100% !important; } } /* Allow page scroll when cursor is in empty area; children (.client-capsule-wrapper > *) keep pointer-events: auto for drag */ .reveal-text.indent .split-line:first-child { padding-left: 20px; } @media (max-width: 574.98px) { .reveal-text.indent .split-line:first-child { padding-left: 0; } } :root { /** @font family declaration */ --at-ff-body: 'DM Sans', sans-serif; /** @font size declaration */ --at-fz-font-label: 12px; --at-fz-font-md: 16px; --at-fz-font-lg: 20px; --at-fz-font-xl: 22px; --at-fz-font-3xl: 32px; --at-fz-ds-1: 124px; /** @color declaration */ --at-common-white: #ffffff; --at-common-black: #1e1e1e; --at-common-dark-white: #1e1e1e; --at-common-dark-black: #FFFFFF; --at-neutral-0: #FEFEFE; --at-neutral-0-rgb: 254, 254, 254; --at-neutral-50: #F2F2F2; --at-neutral-100: #DFDFDF; --at-neutral-300: #B7B7B7; --at-neutral-500: #585959; --at-neutral-900: #1D1D1D; --at-neutral-950: #0F0F0F; --at-neutral-dark-0: #0C0C0C; --at-neutral-dark-0-rgb: 12, 12, 12; --at-neutral-dark-50: #141414; --at-neutral-dark-100: #212121; --at-neutral-dark-300: #404040; --at-neutral-dark-500: #B3B3B3; --at-neutral-dark-900: #EFEFEF; --at-neutral-dark-950: #F4F4F4; --at-theme-primary: #F0460E; } * { margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-size: 16px; line-height: 1.2; font-weight: normal; color: var(--at-neutral-900); background-color: var(--at-neutral-0); font-family: var(--at-ff-body); } img { max-width: 100%; height: auto; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; font-weight: 700; line-height: 1.2; letter-spacing: -5%; transition: color 0.3s ease-out; color: var(--at-neutral-900); font-family: var(--at-ff-body); } h1, .h1 { font-size: 70px; } h2, .h2 { font-size: 60px; } h3, .h3 { font-size: 52px; } h4, .h4 { font-size: 38px; } h5, .h5 { font-size: 26px; } h6, .h6 { font-size: 20px; } .fz-font-lg { font-size: 18px !important; } @media screen and (min-width: 1401px) { h1, .h1 { font-size: 84px; } h2, .h2 { font-size: 72px; } h3, .h3 { font-size: 64px; } h4, .h4 { font-size: 48px; } h5, .h5 { font-size: 34px; } h6, .h6 { font-size: 24px; } .fz-font-lg { font-size: 20px !important; } } ul { margin: 0px; padding: 0px; } p { font-size: 16px; font-weight: 500; margin-bottom: 15px; letter-spacing: -2%; line-height: 1.2; font-family: var(--at-ff-body); color: var(--at-neutral-500); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; height: 56px; width: 100%; line-height: 56px; font-size: 14px; color: var(--at-neutral-900); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--at-neutral-500); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* MODERN BROWSER */ color: var(--at-neutral-500); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { /* MODERN BROWSER */ color: var(--at-neutral-500); } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: var(--at-neutral-900); } input[type=text]:focus::-moz-placeholder, input[type=email]:focus::-moz-placeholder, input[type=tel]:focus::-moz-placeholder, input[type=number]:focus::-moz-placeholder, input[type=password]:focus::-moz-placeholder, input[type=url]:focus::-moz-placeholder, textarea:focus::-moz-placeholder { opacity: 0; } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--at-neutral-900); color: var(--at-neutral-0); text-shadow: none; } ::-moz-selection { background: var(--at-neutral-900); color: var(--at-neutral-0); text-shadow: none; } ::selection { background: var(--at-neutral-900); color: var(--at-neutral-0); text-shadow: none; } *::-moz-placeholder { color: var(--at-neutral-900); font-size: 14px; opacity: 1; } *::placeholder { color: var(--at-neutral-900); font-size: 14px; opacity: 1; } /*--------------------------------- 1.1 Common Classes ---------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { position: relative; z-index: 1; } .z-index-3 { position: relative; z-index: 3; } .z-index-5 { position: relative; z-index: 5; } .p-relative { position: relative; } .p-absolute { position: absolute; } .img-cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 1400px) { .container-2200 { max-width: 2200px; margin-left: auto; margin-right: auto; } } /* Font weight */ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-900 { font-weight: 900; } /* Font size */ .fz-font-label { font-size: var(--at-fz-font-label); } .fz-font-md { font-size: var(--at-fz-font-md); } .fz-font-lg { font-size: var(--at-fz-font-lg); } .fz-font-xl { font-size: var(--at-fz-font-xl); } .fz-font-3xl { font-size: var(--at-fz-font-3xl); } .fz-ds-1 { font-size: var(--at-fz-ds-1); } /* Color */ .common-black { color: var(--at-common-black) !important; } .neutral-0 { color: var(--at-neutral-0) !important; } .neutral-500 { color: var(--at-neutral-500) !important; } .neutral-900 { color: var(--at-neutral-900) !important; } /* Background Color */ .bg-neutral-0 { background-color: var(--at-neutral-0) !important; } .bg-neutral-50 { background-color: var(--at-neutral-50) !important; } .bg-neutral-950 { background-color: var(--at-neutral-950) !important; } /*--------------------------------- Footer Fixed Bottom Effect (Kanso Style) ---------------------------------*/ #smooth-content { pointer-events: none; } #smooth-content > * { pointer-events: auto; } #smooth-content main { position: relative; z-index: 2; will-change: transform; min-height: 100vh; } #smooth-content .footer-placeholder { pointer-events: none; } .footer-placeholder { width: 100%; pointer-events: none; } /*--------------------------------- 1.2 Default Spacing ---------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-150 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-130 { padding-top: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-120 { padding-top: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-100 { padding-top: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-120 { padding-bottom: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-100 { padding-bottom: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { /* Font size */ .fz-font-label { font-size: 12px !important; } .fz-font-md { font-size: 18px !important; } .fz-font-lg { font-size: 20px !important; } .fz-font-xl { font-size: 22px !important; } .fz-font-3xl { font-size: 28px !important; } .fz-ds-1 { font-size: 72px !important; } h1, .h1 { font-size: 58px; } h2, .h2 { font-size: 50px; } h3, .h3 { font-size: 42px; } h4, .h4 { font-size: 30px; } h5, .h5 { font-size: 28px; } h6, .h6 { font-size: 20px; } .fz-150 { font-size: 100px; } .fz-200 { font-size: 120px; } .scroll-section .pb-80 { padding-bottom: 0; } .d-md-none { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { /* Font size */ .fz-font-label { font-size: 12px !important; } .fz-font-md { font-size: 16px !important; } .fz-font-lg { font-size: 18px !important; } .fz-font-xl { font-size: 20px !important; } .fz-font-3xl { font-size: 26px !important; } .fz-ds-1 { font-size: 60px !important; } h1, .h1 { font-size: 54px; } h2, .h2 { font-size: 52px; } h3, .h3 { font-size: 40px; } h4, .h4 { font-size: 36px; } h5, .h5 { font-size: 24px; } h6, .h6 { font-size: 20px; } .fz-150 { font-size: 110px; } .fz-200 { font-size: 80px; } .scroll-section .pb-80 { padding-bottom: 0; } br { display: none; } .d-md-none { display: none; } } @media (max-width: 574.98px) { /* Font size */ .fz-font-label { font-size: 12px !important; } .fz-font-md { font-size: 14px !important; } .fz-font-lg { font-size: 16px !important; } .fz-font-xl { font-size: 18px !important; } .fz-font-3xl { font-size: 24px !important; } .fz-ds-1 { font-size: 54px !important; } h1, .h1 { font-size: 50px; } h2, .h2 { font-size: 42px; } h3, .h3 { font-size: 36px; } h4, .h4 { font-size: 30px; } h5, .h5 { font-size: 20px; } h6, .h6 { font-size: 16px; } .fz-150 { font-size: 52px; } .fz-200 { font-size: 38px; } br { display: none; } .scroll-section .pb-80 { padding-bottom: 0; } } @media (min-width: 1400px) { .container { max-width: 1750px; } } /* HEADER CSS */ /*----------------------------------------*/ /* 3.2 Header main /*----------------------------------------*/ .at-header-sidebar-btn { display: flex; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50px; } .at-header-logo { display: flex; align-items: center; } .at-header-logo a { display: inline-flex; align-items: center; gap: 4px; } .at-header-spacing { padding: 10px 0; } /*----------------------------------------*/ /* Header 7 (toggle inline nav) /*----------------------------------------*/ /*----------------------------------------*/ /* Header 8 — primary-coloured CTA button /*----------------------------------------*/ :root { } /* Header 12 (Home 12) */ /* Header 14 (Home 14 — Photography Showcase) */ /*----------------------------------------*/ /* 5.2 Postbox css /*----------------------------------------*/ /*----------------------------------------*/ /* 5.1 Blog css /*----------------------------------------*/ /* Blog card 2 – horizontal 3-column layout */ /* Blog card 3 – sidebar Flash news (compact horizontal) */ .blog-card-3-wrap { display: flex; flex-direction: column; gap: 0; margin-top: 24px; } /* Product card – shop archive */ /*----------------------------------------*/ /* 4.1 Mobile Menu /*----------------------------------------*/ .at-main-menu { padding: 5px 8px; } .at-main-menu nav ul li { list-style: none; display: inline-block; position: relative; } .at-main-menu nav ul li.has-dropdown > a { color: var(--at-common-black); position: relative; transition: all 0.4s ease 0.3s ease-out; } .at-main-menu nav ul li.has-dropdown > a::after { content: ""; position: absolute; bottom: 12px; right: 12px; width: 8px; height: 8px; background-size: auto; background-repeat: no-repeat; background-position: center; z-index: 0; background-image: url('data:image/svg+xml,'); } .at-main-menu nav ul li:hover > .submenu { visibility: visible; opacity: 1; transform: scale(1); } .at-main-menu nav ul li:hover.has-dropdown > a { transition: all 0.4s ease 0.3s ease-out; } .at-main-menu nav ul li a { font-family: var(--at-ff-body); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--at-common-black); padding: 10px 24px; display: inline-block; line-height: 1; } .at-main-menu nav ul li a:hover { color: var(--at-common-black); } .at-main-menu nav ul li a::before { content: ""; position: absolute; bottom: -20px; left: 0; width: 100%; height: 100%; z-index: -1; } .at-main-menu nav ul li .submenu { position: absolute; top: 120%; left: 0; width: 260px; z-index: 99; opacity: 0; padding: 12px 0; transition: 0.5s; text-align: start; visibility: hidden; transform-origin: 0 0; transform: scale(1, 0); backdrop-filter: blur(20px); background: rgba(var(--at-neutral-0-rgb), 0.9); box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1); } .at-main-menu nav ul li .submenu li { width: 100%; padding: 0 12px; border-radius: 8px; margin: 0; } .at-main-menu nav ul li .submenu li a { position: relative; font-weight: 500; font-size: 16px; line-height: 1; color: var(--at-neutral-500); padding: 12px 18px; display: inline-block; letter-spacing: -0.01em; text-align: start; width: 100%; font-family: var(--at-ff-body); transition: padding-left 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.3s ease, color 0.3s ease; } .at-main-menu nav ul li .submenu li .submenu { top: 0; left: 100%; } .at-main-menu nav ul li .submenu li:hover > a { background: var(--at-neutral-50); color: var(--at-neutral-900) !important; padding-left: 23px; } .at-main-menu nav ul li .at-megamenu-title { font-size: 20px; font-weight: 600; padding-left: 18px; padding-right: 6px; color: var(--at-common-black); font-family: var(--at-ff-body); } .at-main-menu nav ul li .at-megamenu-title-wrap { display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .at-megamenu-title { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--at-common-black); font-family: var(--at-ff-body); } .at-megamenu-title-wrap { display: block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--at-neutral-100); } /*----------------------------------------*/ /* 4.x Main menu — text swap hover animation /* Wrapper .at-link-swap is injected by main.js (section 47c) /*----------------------------------------*/ .at-main-menu > nav > ul > li > a { /* Descender room: wrapper has 4px padding-bottom for "g","p" tails; compensate link's bottom padding so total height stays 36px. */ --link-desc-room: 4px; padding-bottom: calc(10px - var(--link-desc-room)); } .at-main-menu > nav > ul > li > a .at-link-swap { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; padding-bottom: var(--link-desc-room); } .at-main-menu > nav > ul > li > a .at-link-swap .text-1, .at-main-menu > nav > ul > li > a .at-link-swap .text-2 { display: block; line-height: inherit; /* Wavy easing: cubic-bezier with overshoot creates a bounce/settle feel that reads as a subtle wave during the swap. */ transition: transform 0.45s cubic-bezier(0.5, 1.5, 0.35, 1); } .at-main-menu > nav > ul > li > a .at-link-swap .text-1 { position: relative; } .at-main-menu > nav > ul > li > a .at-link-swap .text-2 { position: absolute; top: 0; left: 0; right: 0; /* Park text-2 fully below the wrapper's padding-box (own height + descender room) so it never leaks at rest. */ transform: translateY(calc(100% + var(--link-desc-room))); } /* Trigger swap on the parent
  • :hover so the hit area covers the entire menu item (incl. empty space inside .menu-light.style-1 where is shorter than the 48px container). */ .at-main-menu > nav > ul > li:hover > a .at-link-swap .text-1 { /* Push text-1 up enough to clear both content + padding-bottom area. */ transform: translateY(calc(-100% - var(--link-desc-room))); } .at-main-menu > nav > ul > li:hover > a .at-link-swap .text-2 { transform: translateY(0); } /*----------------------------------------*/ /* 4.3 offcanvas scss /*----------------------------------------*/ .body-overlay { position: fixed; top: 0; left: 0; z-index: 995; width: 100%; height: 100%; background: rgba(24, 24, 24, 0.5); visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; } .body-overlay.apply { opacity: 1; visibility: visible; } .body-overlay:hover { cursor: url(../imgs/icons/cross-out.webp), pointer; } .at-offcanvas { background-position: center; background-size: cover; background-repeat: no-repeat; position: fixed; top: 0; right: -100%; width: 460px; bottom: 0; box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8); background-color: var(--at-common-white); z-index: 997; padding: 50px; scrollbar-width: none; opacity: 0; visibility: hidden; transition: 0.45s ease-in-out; overflow-y: scroll; } @media (max-width: 574.98px) { .at-offcanvas { width: 100%; padding: 40px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .at-offcanvas { width: 400px; padding: 40px; } } .at-offcanvas-logo a { display: flex; align-items: center; gap: 4px; } .at-offcanvas.opened { opacity: 1; visibility: visible; right: 0; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 0.6s; } .at-offcanvas-top { margin-bottom: 50px; } .at-offcanvas-close-btn button { color: rgba(var(--at-common-black), 1); } .at-offcanvas-close-btn button:hover { opacity: 1; transform: rotate(90deg); } .at-offcanvas-menu .at-megamenu-box { margin-bottom: 30px; } .at-offcanvas-menu .at-megamenu-box li a { padding: 8px 20px; border-radius: 10px; font-size: 17px; } .at-offcanvas-menu .at-megamenu-box li a:hover { background-color: var(--at-neutral-50); color: var(--at-common-black); } .at-offcanvas-title { font-size: 64px; line-height: 1; letter-spacing: -0.8px; font-weight: 700; color: var(--at-common-black); } .at-offcanvas-title.sm { font-size: 36px; font-weight: 600; margin-bottom: 15px; color: var(--at-common-black); } .at-offcanvas-contact { margin-bottom: 55px; } .at-offcanvas-contact ul li { list-style: none; } .at-offcanvas-contact ul li:not(:last-child) { margin-bottom: 2px; } .at-offcanvas-contact ul li a { display: inline-block; color: var(--at-neutral-900); position: relative; font-family: var(--at-ff-body); } .at-offcanvas-gallery { margin-bottom: 65px; } .at-offcanvas-content p { font-size: 20px; font-weight: 500; line-height: normal; color: var(--at-neutral-900); font-family: var(--at-ff-body); } .at-offcanvas-social { margin-top: 40px; margin-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .at-offcanvas-social { margin-bottom: 40px; } } .at-offcanvas-social__grid { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 0; padding: 0; } .at-offcanvas-social__link { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--at-common-black); font-size: 16px; font-weight: 500; font-family: var(--at-ff-body); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease; } .at-offcanvas-social__link:hover { color: var(--at-theme-primary, var(--at-common-black)); opacity: 0.85; } .at-offcanvas-social__link svg { flex-shrink: 0; width: 18px; height: 18px; } .at-offcanvas-2-wrapper { padding: 100px 100px 0px; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .at-offcanvas-2-wrapper { padding: 80px 50px 0px; padding-right: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .at-offcanvas-2-wrapper { padding: 60px 50px 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .at-offcanvas-2-wrapper { padding: 60px 30px 0px; } } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li { overflow: hidden; opacity: 0; visibility: hidden; transition: all 1.5s ease-in-out !important; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li:nth-child(2) > a { transition-delay: 1.7s; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li:nth-child(3) > a { transition-delay: 1.8s; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li:nth-child(3) > a { transition-delay: 1.9s; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li:nth-child(4) > a { transition-delay: 2s; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li:nth-child(5) > a { transition-delay: 2.1s; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a { font-size: 48px; padding: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.04em; color: var(--at-common-black); font-family: var(--at-ff-body); transform: translateY(-300px); opacity: 0; visibility: hidden; transition: all 1.5s ease-in-out !important; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a { font-size: 42px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a { font-size: 54px; } } @media (max-width: 574.98px) { .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a { font-size: 50px; } } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .at-menu-close i { font-size: 28px; color: var(--at-common-black); } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a { font-size: 16px; font-weight: 400; line-height: 1; transition: 0.3s; color: var(--at-neutral-900); letter-spacing: -0.02em; font-family: var(--at-ff-body); position: relative; } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a:hover { background-color: initial; transform: translateX(15px); color: var(--at-common-black); } .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 5px; height: 5px; z-index: -1; background-color: var(--at-neutral-900); border-radius: 50%; transition: 0.3s; } .at-offcanvas-2-wrapper .hamburger-close-btn { color: var(--at-common-black); cursor: pointer; transition: all 0.4s ease; } .at-offcanvas-2-wrapper .hamburger-close-btn:hover { transform: rotate(90deg); } .at-offcanvas-2-wrapper .hamburger-mobile-close-btn:hover { transform: rotate(0); } .at-offcanvas-2-wrapper .hamburger-mobile-close-btn { position: absolute; bottom: -100px; left: 0; right: 0; text-align: center; font-size: 20px; } .at-offcanvas-2-wrapper .hamburger-mobile-close-btn:hover { color: var(--at-theme-primary); } .at-offcanvas-2-wrapper .at-header-logo { transform: translateY(-80px); visibility: hidden; opacity: 0; transition-delay: 0s; transition: all 1.5s ease-in-out !important; } .at-offcanvas-2-left { opacity: 0; animation-delay: 1s; transform: translateY(20px); } .at-offcanvas-2-left .at-offcanvas-menu { border-bottom: 1px solid var(--at-neutral-100); padding-bottom: 105px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .at-offcanvas-2-left .at-offcanvas-menu { margin-bottom: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .at-offcanvas-2-left .at-offcanvas-menu { margin-bottom: 0; } } .at-offcanvas-2-left .at-offcanvas-menu ul { overflow: hidden; overflow-y: scroll; scrollbar-width: none; max-height: 450px; padding-top: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .at-offcanvas-2-left .at-offcanvas-menu ul { max-height: 350px; } } .at-offcanvas-2-area.menu-open { position: fixed; top: 0; right: 0; left: auto; height: 100%; transition: all 0s 2s; width: 600px; z-index: 1000; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .at-offcanvas-2-area.menu-open { width: 100%; } } .at-offcanvas-2-area { position: fixed; left: 100%; } .at-offcanvas-2-area .offcanvas-bg { inset: 0; border-radius: 20px; clip-path: circle(0% at calc(100% - 45px) 45px); transition: clip-path 0.7s ease-in-out; position: fixed; width: 570px; margin: 20px; right: 0; left: auto; z-index: 2; backdrop-filter: blur(20px); background: rgb(var(--at-neutral-0-rgb), 0.9); box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .at-offcanvas-2-area .offcanvas-bg { margin: 0; border-radius: 0; width: 100%; } } .at-offcanvas-2-area.menu-open .offcanvas-bg { clip-path: circle(150% at calc(100% - 45px) 45px); } .at-offcanvas-2-area.menu-open .offcanvas-menu { pointer-events: auto; } .at-offcanvas-2-area.menu-open .at-offcanvas-menu > nav > ul > li { visibility: visible; opacity: 1; } .at-offcanvas-2-area.menu-open .at-offcanvas-menu > nav > ul > li a { visibility: visible; opacity: 1; transform: translateY(0); } .at-offcanvas-2-area.menu-open .at-header-logo { visibility: visible; opacity: 1; transform: translateY(0); } .at-offcanvas-2-area.menu-open .at-offcanvas-2-left { opacity: 1; transform: translateY(0); transition-delay: calc(0.7s + 0.06s); } .at-offcanvas-2-area.menu-open .at-offcanvas-2-left .at-offcanvas-menu { opacity: 1; transform: translateY(0); transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(calc(0.7s + 0.06s) + 0.2s); } .at-offcanvas-2-area:not(.menu-open) .offcanvas-menu { pointer-events: none; } .at-offcanvas-2-area:not(.menu-open) .at-offcanvas-2-left { transition-delay: 0.6s; opacity: 0; transform: translateY(30px); } .at-offcanvas-2-area:not(.menu-open) .at-offcanvas-2-left .at-offcanvas-menu { opacity: 0; transform: translateY(20px); transition-delay: 0.4s; } .at-offcanvas-2-area:not(.menu-open) .offcanvas-bg { clip-path: circle(0% at calc(100% - 45px) 45px); transition-delay: 0.4s; } .hamburger-sticky-menu { border-radius: 16px; border: 1px solid var(--at-neutral-100, #DFDFDF); background: var(--at-neutral-0, #FEFEFE); color: var(--at-neutral-950); font-size: 16px; font-weight: 600; display: inline-flex; padding: 15px 24px; justify-content: center; align-items: center; gap: 8px; position: absolute; top: 40px; right: 20px; z-index: 10; opacity: 0; visibility: hidden; transform: scale(0.5); transition-delay: 0.4s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .hamburger-sticky-menu { top: 20px; right: 20px; padding: 5px 10px; font-size: 14px; } } .hamburger-sticky-menu.header-sticky { opacity: 1; visibility: visible; transform: scale(1); position: fixed; } /*----------------------------------------*/ /* 4.2 Mobile Menu /*----------------------------------------*/ .at-offcanvas-menu .at-megamenu-box li a { font-weight: 400; } .at-offcanvas-menu ul { list-style: none; } .at-offcanvas-menu ul li { position: relative; } .at-offcanvas-menu ul li > a { padding: 7px 0; display: block; font-size: 18px; font-weight: 600; } .at-offcanvas-menu ul li.active > a { color: var(--at-common-black); } .at-offcanvas-menu ul li.active > .at-menu-close i { top: 10px; transform: rotate(90deg); } .at-offcanvas-menu ul li .submenu { display: none; } .at-offcanvas-menu ul li .submenu .submenu { margin-left: 30px; } .at-offcanvas-menu .at-submenu > li > a { padding: 8px 20px; border-radius: 10px; font-size: 16px; } .at-offcanvas-menu .at-submenu > li > a:hover { background-color: #f8f8fb; color: var(--at-common-black); } .at-menu-close { position: absolute; right: 7px; top: 12px; } .at-menu-close i { transition: all 0.3s; font-size: 18px; font-weight: 500; } /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ .at-footer-copyright { font-weight: 500; font-size: 16px; opacity: 0.5; color: var(--at-common-black); } .alt-footer-social-item ul li { position: relative; list-style: none; } .alt-footer-social-item ul li::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .alt-footer-social-item ul li a { font-weight: 500; font-size: 16px; letter-spacing: -0.32px; line-height: 1; color: var(--at-neutral-300); transition: all 0.5s ease; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; } .alt-footer-social-item ul li a .icon-social { color: #fefefe; } .alt-footer-social-item ul li a:hover { color: #ffffff; margin: 0 12px; } .alt-footer-social-item.white-mode ul li::before { border-bottom: 1px solid rgba(33, 33, 33, 0.3); } .alt-footer-social-item.white-mode ul li a .icon-social { color: var(--at-neutral-900); } .alt-footer-social-item.white-mode ul li a { color: var(--at-neutral-500); } .alt-footer-social-item.white-mode ul li a:hover { color: var(--at-neutral-900); margin: 0 12px; } .alt-footer-link-item ul li { list-style: none; } .alt-footer-link-item ul li a { font-weight: 400; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--at-neutral-300); position: relative; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; transition: all 0.4s ease 0.3s ease-out; } .alt-footer-link-item ul li a::before { content: ""; width: 14px; height: 13px; background-image: url('data:image/svg+xml,'); margin-left: 14px; position: absolute; left: 100%; top: 50%; opacity: 0; transition: all 0.5s ease; transform: translate(-15px, -40%); } .alt-footer-link-item ul li a.fz-font-md::before { width: 12px; height: 12px; background-image: url('data:image/svg+xml,'); } .alt-footer-link-item ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; transition: all 0.4s ease 0.3s ease-out; color: var(--at-neutral-0); } .alt-footer-link-item ul li a:hover::before { opacity: 1; transform: translate(-50%, -50%); } .mp-footer-style .at-footer-copyright { color: var(--at-common-white); } .text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .at-letter-span { display: inline-block; } .at-word-span { display: inline-block; } /*----------------------------------------*/ /* Footer Style 2 /*----------------------------------------*/ /*----------------------------------------*/ /* Footer style 7 (Home 7) /*----------------------------------------*/ /*----------------------------------------*/ /* Footer style 8 (Home 8) /*----------------------------------------*/ /*----------------------------------------*/ /* Footer style 9 (Home 9) /*----------------------------------------*/ /*----------------------------------------*/ /* Footer style 10 (Home 10) /*----------------------------------------*/ /*----------------------------------------*/ /* Footer style 11 (Home 11) /*----------------------------------------*/ /* Footer 12 (Home 12) — Always-dark CTA + main footer */ /* ── CTA strip ──────────────────────────────────── */ /* `input.` selector matches the global theme rule `input[type="email"]` in specificity (1 element + 1 class) AND comes later in source order, so this reliably overrides the theme's height: 56px / line-height: 56px on this input only — without touching the global rule. */ /* ── Footer main ────────────────────────────────── */ /* Brand */ /* Socials — uses .at-hero-social pill pattern (shared with footer-1). Compound selector (.at-hero-social.footer-12__socials) keeps specificity above the global .at-hero-social rule from _hero.scss, which is loaded later in the cascade and would otherwise win on equal specificity. */ /* Column links */ /* Hours column */ /* ── Bottom bar ─────────────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ @media (max-width: 574.98px) { /* On mobile the pill wrapper looks cramped; lay out as two stacked full-width controls with their own rounded corners — no outer pill. */ } /* Footer 13 — Architecture */ /* ── Meta bar ────────────────────────────────── */ /* ── Body ────────────────────────────────────── */ /* ── Top row ─────────────────────────────────── */ /* Brand */ /* Newsletter form */ /* Link columns */ /* ── Studios row ─────────────────────────────── */ /* ── Big brand text ──────────────────────────── */ /* ── Legal bar ───────────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Desktop fine-tuning (range-based) */ /* Tablet & phone (≤1199px): stack top row, shrink paddings */ /* Tablet portrait & phone (≤991px): 2-col link cols, single-col studios, stacked legal */ /* Phone (≤767px): single-col link cols, form wraps */ /* Small phone (≤574px) */ /* =========================================================== Footer 14 — Photography Studio Designed dark in light mode. Inverts to light-on-dark via the --at-neutral-* token swap in dark mode (handled centrally in components/_dark-mode.scss). =========================================================== */ /* =========================================================== Footer 15 — Fashion Agency Layout: 2x2 panel grid of dark rounded cards. Row 1: nav+social (64.5%) | newsletter (35.5%) Row 2: brand+services (35.5%) | contact+legal (64.5%) Always-dark surface (does not swap in dark mode) — uses literal hex tokens to match Figma frame intent. =========================================================== */ /* ── Grid ────────────────────────────────────────────────── */ /* 3-col grid with staggered spans: row 1 = 2/3 + 1/3, row 2 = 1/3 + 2/3 (zigzag panel layout). */ /* ── Panel 1 — Nav + social ─────────────────────────────── */ /* ── Panel 2 — Newsletter ───────────────────────────────── */ /* ── Panel 3 — Brand + services ─────────────────────────── */ /* ── Panel 4 — Contact + legal ──────────────────────────── */ /* ── Responsive ─────────────────────────────────────────── */ /* Tablet landscape — stack panel 1 (nav + social) vertically */ /* Tablet portrait — single column stack */ /* Phone */ /* Small phone (≤574.98px) — explicit rules; ranges do NOT cascade */ /*----------------------------------------*/ /* 7.1 about css /*----------------------------------------*/ /*----------------------------------------*/ /* sec-4 about contact form /*----------------------------------------*/ /*----------------------------------------*/ /* About 2 - Sec 3 Our Journey / card-award-2 /*----------------------------------------*/ /*----------------------------------------*/ /* sec-2-about: process cards (scroll-section) /*----------------------------------------*/ /*----------------------------------------*/ /* 7.14 hero css /*----------------------------------------*/ .bg-linear-opacity { position: relative; z-index: 1; overflow: hidden; } .bg-linear-opacity::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.84; background: linear-gradient(99deg, #000 5.05%, rgba(0, 0, 0, 0.44) 49.84%, #000 94.63%); z-index: -1; } /*----------------------------------------*/ /* sec-1-home-4 (Orisa AI Solutions Hero) /*----------------------------------------*/ .sec-1-home-4-wrap { padding-top: 140px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .sec-1-home-4-wrap { padding-top: 100px; } } .sec-1-home-4-wrap .sec-1-home-4 { padding-top: 200px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .sec-1-home-4-wrap .sec-1-home-4 { padding-top: 100px; } } .sec-1-home-4-wrap .sec-1-home-4__tagline { font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.15em; color: #FEFEFE; } @media (max-width: 574.98px) { .sec-1-home-4-wrap .sec-1-home-4__tagline { font-size: 10px; letter-spacing: 0.1em; } } .sec-1-home-4-wrap .sec-1-home-4__btns .at-btn { padding: 14px 24px; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0); background: transparent; } .sec-1-home-4-wrap .sec-1-home-4__btns .at-btn:hover { background: rgba(229, 229, 229, 0.1); border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(3px); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .sec-1-home-4-wrap .sec-1-home-4__btns .at-btn { background: rgba(229, 229, 229, 0.1); border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(3px); } } .sec-1-home-4-wrap .sec-1-home-4__brand { font-weight: 700; font-size: 200px; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sec-1-home-4-wrap .sec-1-home-4__brand { font-size: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sec-1-home-4-wrap .sec-1-home-4__brand { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-1-home-4-wrap .sec-1-home-4__brand { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .sec-1-home-4-wrap .sec-1-home-4__brand { font-size: 32px; } } .sec-1-home-4-wrap .sec-1-home-4__brand-suffix { font-size: 0.5em; font-weight: 600; vertical-align: middle; } .sec-1-home-4-wrap .sec-1-home-4__brand-suffix sup { font-size: 50px; vertical-align: super; opacity: 0.8; font-weight: 400; } /*----------------------------------------*/ /* sec-3-home-4 (How We Work Process Cards) /*----------------------------------------*/ .card__process-card { display: flex; gap: 20px; align-items: center; } .card__process-card.card-2 { margin-top: 80px; } .card__process-card.card-3 { margin-top: 160px; } .card__process-card.card-4 { margin-top: 240px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .card__process-card.card-2 { margin-top: 50px; } .card__process-card.card-3 { margin-top: 50px; } .card__process-card.card-4 { margin-top: 100px; } } @media (max-width: 574.98px) { .card__process-card { flex-direction: column; gap: 16px; margin-top: 0 !important; } } .card__process-visual { position: relative; flex-shrink: 0; width: 100%; max-width: 100px; min-height: 270px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .card__process-visual { max-width: 100px; min-height: 240px; } } @media (max-width: 574.98px) { .card__process-visual { max-width: 80px; min-height: 200px; } } .card__process-pill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; max-height: 320px; border-radius: 9999px; overflow: hidden; } .card__process-pill--1 { background-image: url(../imgs/pages/img-81.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .card__process-pill--2 { background-image: url(../imgs/pages/img-82.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .card__process-pill--3 { background-image: url(../imgs/pages/img-83.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .card__process-pill--4 { background-image: url(../imgs/pages/img-84.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .card__process-pill::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px); opacity: 0.6; pointer-events: none; } .card__process-num { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--at-neutral-0, #FEFEFE); color: var(--at-common-black, #1D1D1D); font-size: 24px; font-weight: 600; line-height: 1; border-radius: 50%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); z-index: 1; } @media (max-width: 574.98px) { .card__process-num { width: 40px; height: 40px; font-size: 18px; top: 16px; } } .card__process-content { flex: 1; min-width: 0; } .card__process-title { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--at-neutral-900); margin-bottom: 12px; } @media (max-width: 574.98px) { .card__process-title { font-size: 20px; } } .card__process-desc { font-size: 16px; line-height: 1.5; color: var(--at-neutral-500); margin-bottom: 16px; } @media (max-width: 574.98px) { .card__process-desc { font-size: 14px; } } .card__process-divider { width: 100%; height: 1px; background: var(--at-neutral-900); } /*----------------------------------------*/ /* sec-4-home-4 (Featured Case Card) /*----------------------------------------*/ /*----------------------------------------*/ /* 7.22 service css /*----------------------------------------*/ .at-service-card { max-height: 480px; min-height: 480px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .at-service-card { min-height: 400px; } } .at-service-card.card-1 { position: relative; } .at-service-card.card-1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.65; background: linear-gradient(99deg, #000 5.05%, rgba(0, 0, 0, 0.44) 49.84%, #000 94.63%); z-index: 0; } .at-service-card.card-2, .at-service-card .card-4 { background: var(--at-common-white); margin-top: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .at-service-card.card-2, .at-service-card .card-4 { margin-top: 0; } } .at-service-card.card-3 { background: #0f0f0f; } /*----------------------------------------*/ /* 7.17 portfolio /*----------------------------------------*/ :root { } /*----------------------------------------*/ /* Award Card Styles /*----------------------------------------*/ .card-award:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--at-neutral-900); transition: all 0.3s ease; background-color: var(--at-neutral-900); } .card-award:hover .card-award-date { color: var(--at-neutral-300); transition: all 0.3s ease; } .card-award:hover .card-award-image img { transform: scale(1.2); transition: all 0.3s ease; } .card-award:hover .card-award-title { transition: all 0.3s ease; color: var(--at-common-white); } .card-award:hover .card-award-web-excellence { transition: all 0.3s ease; color: var(--at-neutral-300); } .card-award:hover .card-award-url { transition: all 0.3s ease; color: var(--at-neutral-300); } .card-award:hover .card-award-icon { color: var(--at-common-white); transition: all 0.3s ease; } .card-award-link { text-decoration: none; color: inherit; gap: 0px; display: flex; align-items: center; flex-wrap: wrap; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .card-award-link { flex-wrap: wrap; gap: 5px; } } @media (min-width: 1401px) { .card-award-link { gap: 20px; } } .card-award-date { flex: 0 0 200px; font-size: 14px; font-weight: 400; color: var(--at-neutral-500); white-space: nowrap; transition: all 0.3s ease; font-family: var(--at-ff-body); } @media only screen and (min-width: 768px) and (max-width: 991px) { .card-award-date { flex: 0 0 130px; } } @media (max-width: 574.98px) { .card-award-date { font-size: 12px; } } .card-award-meta { flex: 1; } .card-award-image { width: 90px; height: 62px; border-radius: 8px; overflow: hidden; } .card-award-image img { width: 100%; height: 100%; transition: all 0.3s ease; -o-object-fit: cover; object-fit: cover; } @media (max-width: 574.98px) { .card-award-image { width: 60px; height: 42px; } } .card-award-content { flex: 0 0 450px; display: flex; gap: 16px; align-items: center; min-width: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .card-award-content { flex: 0 0 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .card-award-content { flex: 1 1 100%; } } @media (min-width: 1400px) { .card-award-content .container { flex: 0 0 600px; } } .card-award-title { color: var(--at-common-black, #1d1d1d); line-height: 1.4; margin-bottom: 4px; font-family: var(--at-ff-body); transition: all 0.3s ease; letter-spacing: -0.01em; } @media (max-width: 574.98px) { .card-award-title { font-size: 14px; } } .card-award-web-excellence { flex: 0 0 400px; color: var(--at-neutral-500); gap: 8px; transition: all 0.3s ease; flex-wrap: wrap; font-family: var(--at-ff-body); } @media (max-width: 574.98px) { .card-award-web-excellence { font-size: 12px; } } .card-award-url { color: var(--at-common-black, #1d1d1d); } .card-award-icon { flex-shrink: 0; transition: all 0.3s ease; width: 14px; height: 14px; color: var(--at-common-black, #1d1d1d); display: flex; align-items: center; justify-content: center; } .card-award-icon svg { width: 100%; height: 100%; } @media (max-width: 574.98px) { .card-award-icon { width: 12px; height: 12px; } } .card-award-link:hover .card-award-icon { transform: rotate(45deg); } /* Card award expanded image preview (follows cursor, top-right of cursor, rotated -15deg) */ .card-award-preview { position: fixed; left: 0; top: 0; width: 280px; pointer-events: none; z-index: 9999; opacity: 0; visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); will-change: transform; transform-origin: left bottom; } .card-award-preview img { width: 100%; height: auto; display: block; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .card-award-preview { display: none !important; } } /* testimonial css start */ .scroll-section .wrapper { position: relative; height: auto; } .scroll-section .list { height: 100%; position: relative; } .scroll-section .item { min-height: 100vh; width: 100%; top: 0; left: 0; right: 0; height: auto; } .scroll-section .item:first-child { min-height: 100%; height: 100%; } .scroll-section .item:not(:first-child) { position: absolute; } /* testimonial css end */ /*----------------------------------------*/ /* Team Card Styles /*----------------------------------------*/ /*----------------------------------------*/ /* Team Card 2 (Home 4 Sec 6) - Social overlay on hover /*----------------------------------------*/ /*----------------------------------------*/ /* 7.11 faq css /*----------------------------------------*/ /*----------------------------------------*/ /* 7.3 banner /*----------------------------------------*/ /*----------------------------------------*/ /* 7.13 gallery css /*----------------------------------------*/ /*----------------------------------------*/ /* Content product right – shop details /*----------------------------------------*/ /*----------------------------------------*/ /* Shop cart – list & items /*----------------------------------------*/ /* Cart item card */ /*----------------------------------------*/ /* Shop cart – summary /*----------------------------------------*/ /*----------------------------------------*/ /* Shop checkout – Billing Details & Payment /*----------------------------------------*/ /* Billing Details */ /* Payment */ /*----------------------------------------*/ /* 7.23 skill css /*----------------------------------------*/ /*----------------------------------------*/ /* sec-6-about: skill cards /*----------------------------------------*/ /*----------------------------------------*/ /* Home 2 Section 11 - Price plan toggle /*----------------------------------------*/ /*----------------------------------------*/ /* Home 2 Section 11 - Pricing cards /*----------------------------------------*/ /*----------------------------------------*/ /* sec-2-home-5 - Why Orisa 3 columns /*----------------------------------------*/ /*----------------------------------------*/ /* at-brand-scroll - Vertical random scroll of 3 logos in each brand cell /*----------------------------------------*/ /*----------------------------------------*/ /* block-journey - Career Path & Expertise /* Header CTA: Book A Call Now | Hero card: SINCE 2012 + overlay | Journey list /*----------------------------------------*/ /*----------------------------------------*/ /* sec-1-home-7 (Advancing Startup Innovation Hero) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-2-home-7 (We Power the World's Fastest Growing Startups) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-4-home-7 (Our mission — dual reveal-text headline + locations) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-5-home-7 (Specialized services + accordion + throwable logos) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-6-home-7 (The Process — Growth Engine) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-7-home-7 (CTA — Ready to Build the Future?) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-8-home-7 (Team — Dedicated Team + Staggered Portrait Grid) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-9-home-7 (Marquee — carouselTicker + GSAP scroll-move) /* Structure mirrors Home 3 sec-2: .carouselTicker > ul.carouselTicker__list /*----------------------------------------*/ /*----------------------------------------*/ /* sec-10-home-7 (Insights for Founders — blog grid) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-11-home-7 (Get in touch — contact form) /*----------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 1: Hero ------------------------------------------------------------------*/ /*----------------------------------------*/ /* Home 8 — Section 2 (Orange marquee — carouselTicker-left) /* Brand-1 bar, 32px semibold white, 20px gap, 16px star /*----------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 3 (About block + staggered photos) ------------------------------------------------------------------*/ /*----------------------------------------*/ /* Home 8 — Section 4 (Services + Home 1 sec-4 GSAP hover stack) /*----------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 6 (Selected works) ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 7 (Image rails with scroll-move-right/left) ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 8 (Testimonials) ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Home 8 — Section 9 (CTA) ------------------------------------------------------------------*/ /*----------------------------------------*/ /* sec-1-home-9 (Modern Agency Hero) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-2-home-9 (Home 9 — stats / odometer row) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-3-home-9 (Home 9 — about + 3 pillars) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-4-home-9 (Home 9 — Selected work) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-5-home-9 (Home 9 — Marquee / contact) /*----------------------------------------*/ [data-bs-theme=dark] .sec-5-home-9 { } /*----------------------------------------*/ /* sec-6-home-9 (Home 9 — Meet our team) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-7-home-9 (Home 9 — Collective) /*----------------------------------------*/ /*----------------------------------------*/ /* Home 10 — placeholder section spacing /*----------------------------------------*/ /*------------------------------------------------------------------ Home 10 — Section 1: Creative 3D Studio Hero ------------------------------------------------------------------*/ /*----------------------------------------*/ /* sec-2-home-10 (Home 10 — Panoramic scene) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-3-home-10 (Home 10 — Selected projects / masonry) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-4-home-10 (Home 10 — Our services) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-5-home-10 (Home 10 — About + metrics) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-6-home-10 (Home 10 — Meet the team) /*----------------------------------------*/ /*================================================================== Home 11 — Motion & Video Creative Studio ==================================================================*/ /*------------------------------------------------------------------ Section 1 — Cinematic Hero ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 2 — Trusted Clients Marquee ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 3 — About Studio ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 4 — Featured Works ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 5 — Services (modernized) ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 6 — Studio Process ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 7 — Testimonials ------------------------------------------------------------------*/ /*------------------------------------------------------------------ Section 8 — Call to Action ------------------------------------------------------------------*/ /* Home 12 / Section 1 — Hero (Pure Design. Potent Storytelling) */ /* ── Social proof pill ───────────────────────────── */ /* ── Headline ────────────────────────────────────── */ /* ── Subline ─────────────────────────────────────── */ /* ── CTAs ────────────────────────────────────────── */ /* ── Image strip — Swiper marquee ────────────────── */ /* ── Responsive ──────────────────────────────────── */ /* Home 12 / Section 2 — Selected Projects */ /* ── Section header ─────────────────────────────── */ /* ── Cards container ────────────────────────────── */ /* ── Project card ───────────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 3 — Our Services */ /* ── Section header ─────────────────────────────── */ /* ── Services grid ──────────────────────────────── */ /* ── Service card ───────────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 4 — Process Philosophy */ /* ── Section header ─────────────────────────────── */ /* ── Cards row ──────────────────────────────────── */ /* ── Process card ───────────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 5 — Pricing */ /* ── Dot pattern background ─────────────────────── */ /* ── Section header ─────────────────────────────── */ /* ── Tables row ─────────────────────────────────── */ /* ── Pricing card ───────────────────────────────── */ /* ── Features list ──────────────────────────────── */ /* ── Custom pricing CTA ─────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 6 — About + Brand logos (dark) */ /* ── Top bar with line ──────────────────────────── */ /* ── Lede paragraph ─────────────────────────────── */ /* ── Brand logos — Swiper marquee ────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 7 — Testimonials */ /* ── Section header ─────────────────────────────── */ /* ── Cards row (3 staggered columns) ────────────── */ /* ── Testimonial card ───────────────────────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 12 / Section 8 — FAQ accordion */ /* ── Section header ─────────────────────────────── */ /* ── List ───────────────────────────────────────── */ /* ── Accordion item (native
    ) ──────────── */ /* ── Responsive ─────────────────────────────────── */ /* Home 13 / Section 1 — Hero (Orisa® Architecture) */ /* ── Top row ─────────────────────────────────── */ /* ── Hero card ───────────────────────────────── */ /* ── Main slider ─────────────────────────────── */ /* ── Vertical nav buttons ────────────────────── */ /* ── Thumbs slider ───────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: stack top row + wrap brand from tablet down */ /* Home 13 / Section 2 — About Us */ /* ── Top row ─────────────────────────────────── */ /* ── Left column ─────────────────────────────── */ /* ── Right column ────────────────────────────── */ /* ── Stats row ───────────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: stack top grid for tablet & phone */ /* Cascading mobile pivot: single-column media grid for phone */ /* Home 13 / Section 3 — Selected Projects */ /* ── Header ──────────────────────────────────── */ /* ── Project list ────────────────────────────── */ /* ── Card meta (left) ────────────────────────── */ /* ── Card media (middle) ─────────────────────── */ /* ── Card info (right) ───────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: stack header for tablet & phone */ /* Cascading mobile pivot: single-column card layout for phone */ /* Home 13 / Section 4 — Build with us CTA */ /* ── Top meta bar ────────────────────────────── */ /* ── Heading ─────────────────────────────────── */ /* ── Bottom row ──────────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: stack bottom row + left-align contact for tablet & phone */ /* Phone: hide center coord bar; loosen card */ /* Home 13 / Section 5 — Our Expertise */ /* ── Header ──────────────────────────────────── */ /* ── List ────────────────────────────────────── */ /* ── Card ────────────────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: stack header + card-head for tablet & phone */ /* Cascading mobile pivot: single-column card layout for phone */ /* Home 13 / Section 6 — Our Process Timeline */ /* ── Header ──────────────────────────────────── */ /* ── Timeline ────────────────────────────────── */ /* Active phase state */ /* ── Responsive ──────────────────────────────── */ /* Cascading mobile pivot: single-column header for tablet & phone */ /* Cascading mobile pivot: single-column timeline for phone */ /* Home 13 / Section 7 — Testimonial */ /* ── Media ───────────────────────────────────── */ /* ── Content ─────────────────────────────────── */ /* ── Head ────────────────────────────────────── */ /* ── Quote ───────────────────────────────────── */ /* ── CTA ─────────────────────────────────────── */ /* ── Responsive ──────────────────────────────── */ /* Stack inner as flex column on tablet & phone */ /* Home 13 / Section 8 — The Orisa Distinction */ /* ── Top wrapper ─────────────────────────────── */ /* ── Body ────────────────────────────────────── */ /* ── Left ────────────────────────────────────── */ /* ── List ────────────────────────────────────── */ /* Active / hover state */ /* ── Responsive ──────────────────────────────── */ /* Stack body as flex column on tablet & phone */ /* Cascading mobile pivot: stack top wrapper for tablet & phone */ /* Cascading mobile pivot: shrink row grid for small phones */ /* =========================================================== Section 1 — Home 14 (Photography Hero) =========================================================== */ /* =========================================================== Section 2 — Home 14 (The Studio) =========================================================== */ /* =========================================================== Section 3 — Home 14 (Selected Series) =========================================================== */ /* =========================================================== Section 4 — Home 14 (Gallery / Archive) =========================================================== */ /* =========================================================== Section 5 — Home 14 (Services list) Note: this section uses an inverted (dark) palette in light mode. In dark mode it inherits inverse colors via the --at-neutral-* token swap, becoming light-on-dark. =========================================================== */ /* =========================================================== Section 6 — Home 14 (Our Process) =========================================================== */ /* =========================================================== Section 7 — Home 14 (Client Stories / Testimonial) =========================================================== */ /* =========================================================== Section 8 — Home 14 (Recognition Index: Press + Awards) =========================================================== */ /* =========================================================== Section 9 — Home 14 (From the Feed) =========================================================== */ /* =========================================================== Section 1 — Home 15 (Agency Hero) =========================================================== */ /* =========================================================== Section 2 — Home 15 (About Us) =========================================================== */ /* =========================================================== Section 3 — Home 15 (Brand strip with auto-marquee) =========================================================== */ /* =========================================================== Section 4 — Home 15 (Selected work) =========================================================== */ /* =========================================================== Section 5 — Home 15 (From idea to final project) =========================================================== */ /*----------------------------------------*/ /* sec-6-home-15 (Home 15 — Meet our team + throwable logos) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-7-home-15 (Home 15 — What we do) /*----------------------------------------*/ /*----------------------------------------*/ /* sec-8-home-15 (Home 15 — Testimonials) /*----------------------------------------*/ /* =========================================================== Section 9 — Home 15 (Inside / Article & blogs) =========================================================== */ /* Slideshow — 6 layout variants in one partial. Wrapper: .slideshow - default (no modifier) → Horizontal Cinema - .is-split → Editorial Split + Orbital - .is-stack → Typographic Stack + bottom progress bar - .is-curtain → Diagonal Curtain Reveal - .is-zstack → 3D Z-Stack Reveal - .is-vista → Slideshow-faithful vertical scroll + central minimap All rules scoped under the wrapper to avoid global pollution. */ /*----------------------------------------*/ /* Portfolio Details 3 — Editorial Split /*----------------------------------------*/ /* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` . Our image hosts position the as absolute fill inside an aspect-ratio box — make the injected wrap fill the same box. */ /* ---------- shared plus glyph ---------- */ /* =========================================== SEC 1 — Hero split =========================================== */ /* =========================================== SEC 2 — 3-col Intro =========================================== */ /* =========================================== SEC 3 — Bento Gallery =========================================== */ /* =========================================== SEC 4 — Process timeline (dark) =========================================== */ /* =========================================== SEC 5 — Quote overlay =========================================== */ /* =========================================== SEC 6 — Solution + Outcome (2-col w/ divider) =========================================== */ /* =========================================== SEC 7 — Big image strip =========================================== */ /* =========================================== SEC 8 — Related projects (2 large cards) =========================================== */ /*----------------------------------------*/ /* Portfolio Details 4 — Sticky Sidebar + Chapters /* Brand accent: var(--at-theme-primary) (#F0460E) /*----------------------------------------*/ /* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` . Image hosts use absolute-fill img inside aspect-ratio box. */ /* ========================================================= SEC 1 — Compact title block ========================================================= */ /* ========================================================= SEC 2 — Sticky sidebar + chapters ========================================================= */ /* ========================================================= SEC 3 — Pull-quote callout (centered) ========================================================= */ /* ========================================================= SEC 4 — Visual showcase 3 rows ========================================================= */ /* ========================================================= SEC 5 — Next project banner ========================================================= */ /*----------------------------------------*/ /* Portfolio Details 5 — Swiper Fade + Cinematic /* Brand accent: var(--at-theme-primary) (#F0460E) /*----------------------------------------*/ /* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` . Image hosts use absolute-fill img inside aspect-ratio box. */ /* ========================================================= SEC 1 — Swiper fade hero (full-bleed) ========================================================= */ /* ========================================================= SEC 2 — Project brief strip ========================================================= */ /* ========================================================= SEC 3 — Services + Stats (2-col) ========================================================= */ /* ========================================================= SEC 4 — Image grid asymmetric (magazine) ========================================================= */ /* ========================================================= SEC 5 — Vertical timeline alternating L/R ========================================================= */ /* ========================================================= SEC 6 — Awards & Recognition (dark) ========================================================= */ /* ========================================================= SEC 7 — Next project side-by-side (light) ========================================================= */ /*----------------------------------------*/ /* Portfolio Details 6 — Editorial + Marquee + Accordion /* Brand accent: var(--at-theme-primary) /*----------------------------------------*/ /* JS injects `.anim-zoomin-wrap` — fit aspect-ratio hosts */ /* ========================================================= SEC 1 — Hero + marquee strip ========================================================= */ /* ========================================================= SEC 2 — Magazine 2-col + drop cap ========================================================= */ /* ========================================================= SEC 3 — Horizontal scroll Swiper gallery ========================================================= */ /* ========================================================= SEC 4 — Stats grid (4 inline with dot dividers) ========================================================= */ /* ========================================================= SEC 5 — Quote + portrait side-by-side ========================================================= */ /* ========================================================= SEC 6 — Accordion FAQ "Project details" ========================================================= */ /* ========================================================= SEC 7 — Next project compact dark card ========================================================= */ /*----------------------------------------*/ /* 2.3 Back to top /*----------------------------------------*/ .back-to-top-wrapper { position: fixed; right: 50px; bottom: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; } @media (max-width: 574.98px) { .back-to-top-wrapper { right: 20px; bottom: 20px; } } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 50px; } .back-to-top-btn { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; background: var(--at-common-white); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); color: var(--at-common-black); border-radius: 50%; transition: all 0.3s ease-out; } .back-to-top-btn svg { transform: translateY(-2px); } .back-to-top-btn:hover { transform: translateY(-4px); } /*----------------------------------------*/ /* 2.5 Buttons /*----------------------------------------*/ .at-btn { gap: 8px; line-height: 1; font-weight: 600; font-size: 16px; letter-spacing: -0.05em; padding: 17px 25px; text-transform: capitalize; color: #FEFEFE; display: inline-flex; align-items: center; justify-content: center; background-color: #1D1D1D; border-radius: 50px; } .at-btn:hover { color: #FEFEFE; } .at-btn:hover span span.text-1 { transform: translateY(-150%); } .at-btn:hover span span.text-2 { top: 50%; transform: translateY(-50%); } .at-btn:hover i svg:first-child { transform: translate(16px, -16px); } .at-btn:hover i svg:last-child { opacity: 1; visibility: visible; transform: translate(13px, -13px); } .at-btn span { position: relative; z-index: 1; overflow: hidden; display: inline-block; } .at-btn span span.text-1 { position: relative; display: block; transition: 0.3s; } .at-btn span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .at-btn i { position: relative; overflow: hidden; width: 16px; height: 16px; display: inline-flex; margin-left: 4px; } .at-btn i svg { transform: translateY(-2px); position: absolute; bottom: -1px; left: 1px; transition: all 0.2s ease-out; } .at-btn i svg:last-child { left: -12px; bottom: -12px; transform: translate(0, 0); opacity: 0; } .at-btn.btn-sm { padding: 10px 20px; } .at-btn.active { background: var(--at-neutral-900); border-color: var(--at-neutral-900); color: var(--at-neutral-0); } .at-btn-group { display: flex; width: -moz-fit-content; width: fit-content; } .at-btn-group > *:nth-child(1) { transform: scale3d(0.5, 0.5, 1); margin-inline-end: -52px; } .at-btn-group > *:nth-child(2) { transform: scale3d(1, 1, 1); } .at-btn-group > *:nth-child(3) { transform: scale3d(1, 1, 1); margin-inline-start: 0; } .at-btn-group:hover > *:nth-child(1) { transform: scale3d(1, 1, 1); margin-inline-end: 0; background: #1D1D1D; } .at-btn-group:hover > *:nth-child(2) { transform: scale3d(1, 1, 1); background: #1D1D1D; } .at-btn-group:hover > *:nth-child(3) { transform: scale3d(0.5, 0.5, 1); margin-inline-start: -52px; background: #1D1D1D; } .at-btn-group .at-btn-circle { text-align: center; width: 50px; height: 50px; font-weight: 500; font-size: 16px; line-height: 1.5; border-radius: 100%; display: flex; gap: 10px; align-items: center; justify-content: center; background-color: #1D1D1D; color: #FEFEFE; } .at-btn-group .at-btn-circle i { transform: rotate(-45deg); } .at-btn-group-transparent .at-btn { background: #FEFEFE; border: 1px solid rgba(38, 38, 38, 0.1); color: #1D1D1D; } .at-btn-group-transparent .at-btn-circle { background-color: #FEFEFE; color: #1D1D1D; border: 1px solid rgba(38, 38, 38, 0.1); } .at-btn-group-transparent:hover > *:nth-child(2) { background: #FEFEFE; } .at-btn-group-transparent:hover > *:nth-child(1) { background: #FEFEFE; } .at-btn-group.btn-brand-1 .at-btn { background: #F0460E; border: 1px solid #F0460E; color: #FEFEFE; } .at-btn-group.btn-brand-1 .at-btn-circle { background-color: #F0460E; color: #FEFEFE; border: 1px solid #F0460E; } /*----------------------------------------*/ /* 2.1 Animations /*----------------------------------------*/ /*----------------------------------------*/ /* 2.10 Preloader /*----------------------------------------*/ /*--- end of preloader ---*/ /*----------------------------------------*/ /* 2.11 search style /*----------------------------------------*/ /*----------------------------------------*/ /* 2.8 Magic Cursor /*----------------------------------------*/ body.at-magic-cursor #magic-cursor { display: block; } /* Disable magic cursor on tablet/mobile (≤991px) and on touch/no-hover devices. */ @media (max-width: 991.98px), (hover: none), (pointer: coarse) { body.at-magic-cursor #magic-cursor { display: none !important; } } /* Ball view ============= */ /* Ball drag ============= */ /* Ball close ============== */ /*----------------------------------------*/ /* 2.9 Nice Select /*----------------------------------------*/ [data-bs-theme=dark] { --at-common-white: var(--at-common-dark-white); --at-common-black: var(--at-common-dark-black); --at-neutral-0: var(--at-neutral-dark-0); --at-neutral-0-rgb: var(--at-neutral-dark-0-rgb); --at-neutral-50: var(--at-neutral-dark-50); --at-neutral-100: var(--at-neutral-dark-100); --at-neutral-300: var(--at-neutral-dark-300); --at-neutral-500: var(--at-neutral-dark-500); --at-neutral-900: var(--at-neutral-dark-900); --at-neutral-950: var(--at-neutral-dark-950); } [data-bs-theme=dark] .invert-1 { filter: invert(0); } [data-bs-theme=dark] .at-header-logo img, [data-bs-theme=dark] .at-offcanvas-logo img { filter: invert(1); } [data-bs-theme=dark] .invert-0 { filter: invert(0) !important; } [data-bs-theme=dark] .dark-mode-invert { filter: invert(1); } [data-bs-theme=dark] .at-main-menu nav ul li.has-dropdown > a::after { filter: invert(1); } [data-bs-theme=dark] .changeless { --at-common-white: #ffffff; --at-common-black: #1e1e1e; --at-neutral-950: #0f0f0f; --at-neutral-900: #1d1d1d; --at-neutral-500: #585959; --at-neutral-300: #b7b7b7; --at-neutral-100: #dfdfdf; --at-neutral-50: #f2f2f2; --at-neutral-0: #fefefe; } .dark-light-mode .toggle { display: grid; place-items: center; cursor: pointer; line-height: 1; } .dark-light-mode .input { display: none; } .dark-light-mode label { margin-bottom: 0 !important; } .dark-light-mode .icon { grid-column: 1/1; grid-row: 1/1; transition: transform 500ms; line-height: 0.1; } .dark-light-mode .icon--moon { transition-delay: 200ms; } .dark-light-mode .icon--sun { transform: scale(0); } .dark-light-mode #switch:checked + .icon--moon { transform: rotate(360deg) scale(0); } .dark-light-mode #switch:checked ~ .icon--sun { transition-delay: 200ms; transform: scale(1) rotate(360deg); } .card-award { padding: 15px 20px; border-radius: 16px; }